<template>
  <div>
  <div class="mask" v-if="showOpen"></div>
  <div class="nav" @click.prevent="handleShow"><i class="iconfont icon-shujuwajue aliIcon"></i></div>
  <div v-if="showOpen" class="mainNav showNavMain"></div>
  <div class="context" v-if="showOpen" ref="show">
    <div class="item" @click="jump(0)">首页</div>
    <div class="item" @click="jump(1)">技能掌握</div>
    <div class="item" @click="jump(2)">我的作评</div>
    <div class="item" @click="jump(3)">我的经历</div>
  </div>
</div>
</template>

<script>
export default {
  name: 'navBar',
  data () {
    return {
      showOpen: false
    }
  },
  watch: {
  },
  methods: {
    handleShow () {
      this.showOpen = !this.showOpen
    },
    jump (index) {
      this.showOpen = !this.showOpen
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped lang="stylus">
  @keyframes showNavMain
    from {
      width: 0;
    }to {
      width: 20%;
     }
  @keyframes hiddenNavMain
    from {
      width: 20%;
    }to {
      width: 0;
     }
  .nav
    position: absolute;
    right: 1%;
    top: 4%;
    border-radius: 50%;
    box-shadow : 2px 1px 3px #fff;
    width: 70px;
    height: 70px;
    z-index: 101;
    text-align: center;
    line-height: 75px;
    font-size: 2rem;
    cursor pointer
    color: #fff
    .aliIcon
      font-size 2.2rem
  .mainNav
    position: absolute;
    right: 0;
    top: 0;
    height: 0;
    z-index: 100;
    border-bottom:100vh #e4e2e3 solid;
    border-left:15vw solid transparent;
  .showNavMain
    animation showNavMain 0.15s linear forwards
  .context
    position absolute;
    top 23%;
    right 3%;
    width 10%;
    height 50%;
    z-index 101;
    display flex;
    flex-direction column;
    align-items flex-end
    div
      margin 0 0 20px 0
      font-size 30px
      font-family Arial, "Helvetica Neue", Helvetica, sans-serif
      color rgb(104, 105, 103)
      cursor pointer
      &:hover
        color lightblue
    .active
      text-decoration line-through lightblue
      color lightblue
  .mask
    position absolute;
    background rgba(0,0,0,.6);
    width 100%;
    height: 100%;
    left 0
    top 0
    z-index 100
</style>
